import QtQuick 2.6
import QtQuick.Layouts 1.1

import "../../Base/UiBase"
import "../../Base/Config"
import Code 1.0

Rectangle {
    id: root

    color: Color.background
    property var viewDatas: ({
                             system:
                                 {
                                     icon: "../../../resources/message/system/xitongxiaoxi.svg",
                                     text: qsTr("系统消息")
                                 },
                             loginException:
                                 {
                                     icon: "../../../resources/message/system/jinggao.svg",
                                     text: qsTr("登录异常")
                                 },
                             friends:
                                 {
                                     icon: "../../../resources/message/system/haoyou.svg",
                                     text: qsTr("好友申请")
                                 },
                             tc:
                                 {
                                     icon: "../../../resources/message/system/quanzhi.svg",
                                     text: qsTr("特圈推荐")
                                 }
                         })

    Component.onCompleted: {
        messageModel.append({
                                type: "system",
                                messageText: "Hi, 你今天还没有签到哦，签到领取积分吧！  ",
                                time: 1
                            })
        messageModel.append({
                                type: "loginException",
                                messageText: "Hi, 你今天还没有签到哦，签到领取积分吧！  ",
                                time: 1
                            })
        messageModel.append({
                                type: "friends",
                                messageText: "Happy0403申请加你为好友  ",
                                time: 1
                            })
        messageModel.append({
                                type: "tc",
                                messageText: "猜你喜欢的圈子，自拍圈，美术联盟，英雄联盟  ",
                                time: 1
                            })
    }

    MouseArea {
        anchors.fill: parent
        z: -1
    }

    ColumnLayout {
        anchors.fill: parent
        spacing: 0

        // header
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 96 * Size.ratio
            color: Color.foreground
            RowLayout {
                width: parent.width
                height: parent.height
                MouseArea {
                    Layout.preferredWidth: 80 * Size.ratio
                    Layout.fillHeight: true
                    SvgzImage {
                        width: 80 * Size.ratio
                        height: 96 * Size.ratio
                        source: "../../../resources/comment/fanhiu01.svg"
                    }
                    onClicked: root.visible = false
                }
                Item {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Text {
                        anchors.centerIn: parent
                        text: qsTr("系统消息")
                        font.pixelSize: Size.titleFont
                    }
                }
            }
            BottomDivider {
            }
        } // end header

        // body
        ListView {
            Layout.fillWidth: true
            Layout.fillHeight: true
            spacing: 0
            delegate: Rectangle {
                width: parent.width
                height: 120 * Size.ratio
                color: index % 2 ? Color.foreground : Color.foregroundDarker

                // body
                RowLayout {
                    anchors.fill: parent
                    spacing: 0
                    Item {
                        Layout.preferredWidth: height
                        Layout.fillHeight: true
                        HeadHolder {
                            anchors.centerIn: parent
                            SvgzImage {
                                width: 80 * Size.ratio
                                height: 80 * Size.ratio
                                source: viewDatas[type].icon
                            }
                        }
                    }
                    // text body
                    ColumnLayout {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        spacing: 20 * Size.ratio
                        Text {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            verticalAlignment: Text.AlignVCenter
                            text: viewDatas[type].text
                            font.pixelSize: Size.normalFont
                            color: "#323232"
                        }
                        Text {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            verticalAlignment: Text.AlignVCenter
                            clip: true
                            text: messageText
                            color: Color.virtualInput

                            font.pixelSize: Size.normalFont
                            elide: Text.ElideRight
                        }
                    } // end text body

                    // text & red icon on the right
                    Item {
                        Layout.preferredWidth: 100 * Size.ratio
                        Layout.fillHeight: true
                        Layout.topMargin: 30 * Size.ratio
                        Layout.bottomMargin: 25 * Size.ratio

                        Text {
                            anchors {
                                top:parent.top
                                horizontalCenter: parent.horizontalCenter
                            }
                            text: Helper.dateToReadable(time)
                            font.pixelSize: Size.normalFont
                            color: Color.virtualInput
                        }
                        Rectangle {
                            width: 35 * Size.ratio
                            height: width
                            anchors {
                                bottom:parent.bottom
                                horizontalCenter: parent.horizontalCenter
                            }
                            radius: width / 2
                            color: "red"
                            Text {
                                anchors.centerIn: parent
                                font.pixelSize: Size.font26
                                text: String(1)
                                color: "#FFFFFF"
                            }
                        }
                    }
                } // end body

                BottomDivider {
                }
            }
            model: ListModel {
                id: messageModel
            }
        } // end body
    }
}
